<template>
  <div class="my-calendar">
    <ul class="calendar-left">
      <li>甬矽周</li>
      <li v-for="(item, index) in YXWeek" :key="index">
        <button :class="{ isWeek: item.isselect == 1 }">WW{{ item.week }}</button>
      </li>
    </ul>
    <div class="calendar-right">
      <div class="calendarControl">
        <i class="el-icon-d-arrow-left" @click="prevYear"></i>
        <i class="el-icon-arrow-left prevMonth" @click="prevMonth"></i>
        <i class="el-icon-arrow-right nextMonth" @click="nextMonth"></i>
        <i class="el-icon-d-arrow-right" @click="nextYear"></i>
      </div>
      <el-calendar v-model="value" class="custom-calendar" @change="handleCalendarChange">
        <template slot="dateCell" slot-scope="{date, data}">
          <!--          <svg v-if="isRestDay(data.day)" t="1722010932527" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
          <!--            xmlns="http://www.w3.org/2000/svg" p-id="6558" style="width:0.2rem;height: 0.2rem;">-->
          <!--            <path-->
          <!--              d="M269.473684 0h485.052632a269.473684 269.473684 0 0 1 269.473684 269.473684v485.052632a269.473684 269.473684 0 0 1-269.473684 269.473684H269.473684a269.473684 269.473684 0 0 1-269.473684-269.473684V269.473684a269.473684 269.473684 0 0 1 269.473684-269.473684z m7.329684 486.777263v336.303158h67.260632V389.12c25.869474-44.624842 47.211789-91.189895 62.733474-139.695158L342.770526 219.674947C311.727158 317.978947 264.515368 403.994947 199.841684 476.429474l21.989053 72.434526c19.402105-20.048842 37.510737-40.744421 54.972631-62.086737zM394.509474 346.435368V411.755789h105.418105c-36.864 102.831158-86.662737 185.613474-149.396211 247.700211l39.450948 64.026947c59.499789-72.434526 109.298526-171.385263 149.39621-295.558736v394.509473h66.613895V425.337263c42.684632 122.233263 93.776842 219.890526 153.923368 293.618526l45.271579-60.793263c-69.200842-67.260632-122.233263-149.396211-159.097263-246.406737h120.293053V346.435368h-160.390737V228.082526h-66.613895v118.352842H394.509474z"-->
          <!--              fill="#d81e06" p-id="6559"></path>-->
          <!--          </svg>-->
          <svg v-if="isRestDay(data.day)" t="1722010932527" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="6558" style="width:0.2rem;height: 0.2rem;">
            <path
              d="M269.473684 0h485.052632a269.473684 269.473684 0 0 1 269.473684 269.473684v485.052632a269.473684 269.473684 0 0 1-269.473684 269.473684H269.473684a269.473684 269.473684 0 0 1-269.473684-269.473684V269.473684a269.473684 269.473684 0 0 1 269.473684-269.473684z m7.329684 486.777263v336.303158h67.260632V389.12c25.869474-44.624842 47.211789-91.189895 62.733474-139.695158L342.770526 219.674947C311.727158 317.978947 264.515368 403.994947 199.841684 476.429474l21.989053 72.434526c19.402105-20.048842 37.510737-40.744421 54.972631-62.086737zM394.509474 346.435368V411.755789h105.418105c-36.864 102.831158-86.662737 185.613474-149.396211 247.700211l39.450948 64.026947c59.499789-72.434526 109.298526-171.385263 149.39621-295.558736v394.509473h66.613895V425.337263c42.684632 122.233263 93.776842 219.890526 153.923368 293.618526l45.271579-60.793263c-69.200842-67.260632-122.233263-149.396211-159.097263-246.406737h120.293053V346.435368h-160.390737V228.082526h-66.613895v118.352842H394.509474z"
              fill="#d81e06" p-id="6559"></path>
          </svg>
          <div :class="['calendarBox', data.isSelected ? 'is-selected' : '', isRestDay(data.day) ? 'rest-day' : '']">
            <p>{{ Number(data.day.split('-')[2]) }}</p>
            <span class="lunar">
              {{ holidaysLoaded && getHolidayName(data.day) ? getHolidayName(data.day) :
        lunarDateMap[date.toDateString()]
              }}
            </span>
          </div>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script>
import { Lunar } from 'lunar-javascript';
import {
  geYXWeek,
  getVacation,
  getHolidays,

} from '@/api/index'

export default {
  name: 'LunarCalendar',
  data() {
    return {
      sid: '',
      value: new Date(),
      lunarDateMap: {},
      restDays: ['2024-07-24', '2024-07-25', '2024-07-26', '2024-08-15'],
      firstMondayOfCurrentMonth: null,
      YXWeek: '',
      holidays: [],
      holidaysLoaded: false,
    };
  },
  methods: {
    // 获取节假日名称
    getHolidayName(day) {
      const holiday = this.holidays.find(h => h.date === day);
      return holiday ? holiday.name : '';
    },
    // 是否是设定日
    isRestDay(day) {
      return this.restDays.includes(day);
    },
    // 更新给定日期的农历信息
    handleCalendarChange(date) {
      this.updateLunarDate(date);
      this.updateFirstMondayOfCurrentMonth(date);
      this.checkAndDisplayHolidays(date);
      console.log(date, 'date我的数据')
    },
    // 更新整个月的农历信息，包括前一个月和后一个月
    updateLunarDate(date) {
      console.log(date, 'date时间')
      const startDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
      const endDate = new Date(date.getFullYear(), date.getMonth() + 2, 0);
      for (let day = new Date(startDate); day <= endDate; day.setDate(day.getDate() + 1)) {
        const lunar = Lunar.fromDate(day);
        this.$set(this.lunarDateMap, day.toDateString(), `${lunar.getDayInChinese() == '初一' ? lunar.getMonthInChinese() + '月' : ''}${lunar.getDayInChinese() != '初一' ? lunar.getDayInChinese() : ''}`);
      }
      console.log(this.lunarDateMap, 'this.lunarDateMap')
    },
    // 更新当前月份第一行星期一的日期
    updateFirstMondayOfCurrentMonth(date) {
      const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
      const dayOfWeek = firstDayOfMonth.getDay();
      const firstMonday = new Date(firstDayOfMonth);
      firstMonday.setDate(firstDayOfMonth.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));
      this.geYXWeek(this.formatDate(firstMonday));
      this.getHolidays(this.formatDate(firstMonday));
    },

    // 格式化日期为YYYY-MM-DD格式
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以需要加1
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 检查并显示节假日
    checkAndDisplayHolidays(date) {
      const startDate = new Date(date.getFullYear(), date.getMonth(), 1);
      const endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
      for (let day = new Date(startDate); day <= endDate; day.setDate(day.getDate() + 1)) {
        const dateString = this.formatDate(day);
        if (this.isRestDay(dateString)) {
          // 如果是节假日，则替换农历信息
          this.$set(this.lunarDateMap, day.toDateString(), '节假日');
        } else {
          // 否则显示农历信息
          const lunar = Lunar.fromDate(day);
          this.$set(this.lunarDateMap, day.toDateString(), `${lunar.getDayInChinese() == '初一' ? lunar.getMonthInChinese() + '月' : ''}${lunar.getDayInChinese() != '初一' ? lunar.getDayInChinese() : ''}`);
        }
      }
    },
    // 切换到上一年
    prevYear() {
      const currentYear = this.value.getFullYear();
      this.value = new Date(currentYear - 1, this.value.getMonth(), this.value.getDate());
      this.updateLunarDate(this.value);
      this.updateFirstMondayOfCurrentMonth(this.value);
    },
    // 切换到下一年
    nextYear() {
      const currentYear = this.value.getFullYear();
      this.value = new Date(currentYear + 1, this.value.getMonth(), this.value.getDate());
      this.updateLunarDate(this.value);
      this.updateFirstMondayOfCurrentMonth(this.value);
    },
    // 切换到上个月
    prevMonth() {
      const currentYear = this.value.getFullYear();
      const currentMonth = this.value.getMonth();
      if (currentMonth === 0) {
        this.value = new Date(currentYear - 1, 11, this.value.getDate());
      } else {
        this.value = new Date(currentYear, currentMonth - 1, this.value.getDate());
      }
      this.updateLunarDate(this.value);
      this.updateFirstMondayOfCurrentMonth(this.value);
    },
    // 切换到下个月
    nextMonth() {
      const currentYear = this.value.getFullYear();
      const currentMonth = this.value.getMonth();
      if (currentMonth === 11) {
        this.value = new Date(currentYear + 1, 0, this.value.getDate());
      } else {
        this.value = new Date(currentYear, currentMonth + 1, this.value.getDate());
      }
      this.updateLunarDate(this.value);
      this.updateFirstMondayOfCurrentMonth(this.value);
    },

    // 获取甬矽周
    geYXWeek(week) {
      const _this = this;
      geYXWeek(_this.sid, week)
        .then(response => {
          _this.YXWeek = response.data
        })
        .catch(error => {
          console.error('获取甬矽周失败', error);
          if (error.response && error.response.data && error.response.data.errorCode === '400') {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取日历假日
    getVacation() {
      const _this = this;
      getVacation(_this.sid)
        .then(response => {
          console.log(response,'response')
          _this.restDays = response.data.restDays;
        })
        .catch(error => {
          console.error('获取日历假日失败', error);
          if (error.response && error.response.data && error.response.data.errorCode === '400') {
            console.error(error.response.data.msg);
          }
        });
    },
    // 获取节假日
    getHolidays(dayOne) {
      const _this = this;
      getHolidays(_this.sid, dayOne)
        .then(response => {
          //_this.restDays = response.data.restDays;
          console.log(response, 'response')
          _this.holidays = response.data;
          _this.holidaysLoaded = true;
        })
        .catch(error => {
          console.error('获取节假日失败', error);
          if (error.response && error.response.data && error.response.data.errorCode === '400') {
            console.error(error.response.data.msg);
          }
        });
    }
  },
  mounted() {
    this.sid = this._sid;
    this.updateLunarDate(new Date());
    this.updateFirstMondayOfCurrentMonth(new Date());
    this.getVacation();
  },
};
</script>

<style lang="scss" scoped>
.my-calendar {
  display: flex;

  .calendar-left {
    list-style-type: none;
    width: 0.8rem;
    height: 4.17rem;
    padding-top: 0.4rem;

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0.62rem;
      font-size: 0.1777777778rem;
    }

    li:first-child {
      height: 0.46rem;
    }

    li:nth-child(n + 2) {
      button {
        background-color: #DCE5FA;
        color: #80A2EB;
        border: none;
        border-radius: 5px;
        padding: 0.03125rem 0.078125rem;
        font-size: 0.15rem;
        font-family: 'Arial Narrow';
      }

      .isWeek {
        background-color: #5481E5;
        color: #fff;
      }
    }
  }

  .calendar-right {
    width: 5.8rem;
    position: relative;

    .rest-day {
      background-color: #E9EEFC;
      color: #3067DF;
    }

    ::v-deep .el-calendar {
      border: none;
      background-color: transparent;

      .el-calendar__header {
        border-bottom: none;
        padding: 0.078125rem 0.15625rem;
        padding-left: 2rem;
        font-size: 0.21875rem;
      }

      .el-calendar-table {
        th {
          border-bottom: none;
        }

        td {
          border: none;
        }

        td.is-selected {
          background-color: transparent;
          ;
          border-radius: 5px;
        }
      }
    }

    .calendarControl {
      position: absolute;
      top: 0.109375rem;
      left: 1.15rem;

      i {
        padding: 0;
        font-size: 0.2rem;
        border: none;
        color: #aeaeae;
        cursor: pointer;
        font-weight: bold;
      }

      i:hover {
        color: #83A4EC;
      }
    }

    .el-calendar {
      font-size: 0.1777777778rem;
      font-weight: bold;
    }

    ::v-deep .el-calendar__button-group {
      display: none;
    }

    .prevMonth {
      margin-right: 1rem;
    }

    .nextMonth {
      margin-left: 1rem;
    }

    ::v-deep .el-calendar__body {
      padding: 0;

      th {
        font-size: 0.1777777778rem;
        padding: 0.109375rem 0;
      }

      .el-calendar-day {
        height: 0.625rem;
        padding-top: 0;
        position: relative;

        .icon {
          position: absolute;
          top: -0.0825rem;
          right: 0.02rem;
        }

        .calendarBox {
          padding: 0.046875rem;
          border-radius: 5px;
        }

        .calendarBox:hover {
          background-color: #E2EAFB;
          color: #2C64DF;

          span {
            color: #2C64DF;
          }
        }

        .is-selected {
          background-color: #2C64DF;
          color: white;

          span {
            color: white;
          }
        }
      }

      .el-calendar-day:hover {
        background-color: transparent;

      }
    }
  }

  .calendar-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .lunar {
    font-size: 0.13333333rem;
    color: #aaa;
  }
}
</style>
